<template>
	<view>
		<view class="list-cell">
			<view class="uni-list-cell uni-list-cell-pd" >
				<view class="name">联系人</view>
				<view class="opt"><input v-model="model.userName" style="height:50px;text-align:right;" placeholder="请输入联系人姓名"/></view>
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="name">手机号</view>
				<view class="opt"><input type="number" maxlength="11" v-model="model.phone" style="height:50px;text-align:right;" placeholder="请输入手机号码"/></view>
			</view>
			<view class="uni-list-cell uni-list-cell-pd"  @tap="onChangeAddress">
				<view class="name">地&nbsp;&nbsp;&nbsp;&nbsp;址</view>
				<view class="opt"><view >{{model.locationAddress.substr(0, 15) + '...'}}</view><uni-icons type="location-filled" color="#31b977" size="24"></uni-icons></view>
			</view>
			<view class="uni-list-cell uni-list-cell-pd" style="height: 80px;padding: 15px;">
				<textarea style="width: 330px;height: 80px;margin: 0px auto;" v-model="model.addressDetail" placeholder="请输入详情地址（5～120个字符）"></textarea>
			</view>
			<view class="uni-list-cell uni-list-cell-pd">
				<view class="name">设置默认地址</view>
				<view class="opt"><switch :checked="model.defaultFlag" @change="onSwitchChange" /></view>
			</view>
		</view>
		<!-- <view class="address">
			<view class="address-view" >
			  <view class="address-view-left"> 联系人 </view>
			  <view class="address-view-right" >
				  <input v-model="model.userName"/>	
			  </view>
			</view>
			
			<view class="address-view" >
			  <view class="address-view-left"> 电话 </view>
			  <view class="address-view-right">
			    <input v-model="model.phone"/>	
			  </view>
			</view>
			<view class="address-view"  style="height: 180upx;" >
			  <view class="address-view-left"  style="height: 180upx;line-height: 180upx;"> 定位地址 </view>
			  <view class="address-view-right"  style="height: 180upx; display: flex;align-items: center;vertical-align: center; "  @click="onChangeAddress()">
				  <view style="line-height: normal;width: 100%;text-align: right;" v-if="model.locationAddress">{{model.locationAddress}}</view>
				  <view style="line-height: normal;position: absolute;right:0px" v-else>
					  <uni-icons type="location-filled" color="#31b977" size="24"></uni-icons>
				  </view>
			  </view>
			</view>
			<view class="address-view" >
			  <view class="address-view-left"> 详细门牌 </view>
			  <view class="address-view-right">
			    <input v-model="model.addressDetail" />	
			  </view>
			</view>
			<view class="address-view" >
			  <view class="address-view-left"> 用户类型 </view>
			  <view class="address-view-right">
				  <span>商铺</span> <span>住宅</span> <span>写字楼</span>
			  </view>
			</view>
		</view> -->
		<view class="btn" >
			<button type="primary"  @click="addUserAddress()">保存地址</button>
			<button type="primary" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">自动填写手机号</button>
		</view>
	</view>
</template>

<script>
	var WXBizDataCrypt = require('@/common/WXBizDataCrypt.js');  
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import {mapState,mapGetters} from 'vuex'
	export default {
		computed: {
			...mapGetters({
				hasLogin:'hasLogin',
				userInfo: 'userInfo'
		   })
		},
		components:{
			uniIcons
		},
		data() {
			return {
				model:{
					userName:"",
					phone:"",
					longitude:"",
					latitude:"",
					defaultFlag:1,
					locationAddress:"",//地图定位获得的地址
					addressDetail:"",//手动填写的地址
				}
			}
		},
		onLoad(e){
			if(e&&e.item){
				this.model=JSON.parse(e.item) 
			}else{
				//定位地址
				uni.getLocation({
					success: data => {
						console.log(data)
						this.model.longitude=data.longitude
						this.model.latitude=data.latitude
						uni.request({
							url:'https://restapi.amap.com/v3/geocode/regeo?location='+data.longitude+
							','+ data.latitude+
							'&key=739917e6ef56e4e27e30921366cc1d95',
							success: (data) => {
								console.log(data)
								this.model.locationAddress=data.data.regeocode.formatted_address
							}
						})
					}
				})
			}
		},
		methods: {
			onSwitchChange(e){
				this.model.defaultFlag=e.detail.value;
			},
			decryptPhoneNumber(e){
				let pc = new WXBizDataCrypt(this.$appid,this.userInfo.sessionKey);           //wxXXXXXXX为你的小程序APPID
				let data = pc.decryptData(e.detail.encryptedData , e.detail.iv);
				this.model.phone=data.phoneNumber
			},
			onChangeAddress(){
				 let self = this;
				  uni.chooseLocation({
				  success: function(res) {
					self.model.locationAddress=res.name
					self.model.latitude= res.latitude
					self.model.longitude= res.longitude
				 },
				 fail: function(err) {
		            console.log(err)
				}
			  });
			},
			radioChange(evt) {
				this.model.sex = evt.detail.value;
			},
			addUserAddress(){
			    let data=this.model
				if(data._id&&data._id!=""){
					this.$api("address","upd",data).then(res=>{
						this.$msg("保存成功");
						uni.navigateBack({
							delta:1
						})
					})
				}else{
					if(this.model.userName==""){
						this.$msg("联系人不能为空");
						return false
					}
					if(this.model.phone==""){
						this.$msg("电话不能为空");
						return false
					}
					if(this.model.locationAddress==""){
						this.$msg("定位地址不能为空");
						return false
					}
					
					if(this.model.addressDetail==""){
						this.$msg("备注地址不能为空");
						return false
					}
					this.$api("address","add",data).then(res=>{
						this.$msg("保存成功");
						uni.navigateBack({
							delta:1
						})
					})
				}
				
			},
			updateUserAddress(){
			    let data=this.model
				if(this.model.userName==""){
					this.$msg("联系人不能为空");
					return false
				}
				if(this.model.phone==""){
					this.$msg("电话不能为空");
					return false
				}
				if(this.model.locationAddress==""){
					this.$msg("定位地址不能为空");
					return false
				}
				updateUserAddress(data).then(res=>{
					if(res.returnCode=="2"){
						this.$msg("保存成功");
						uni.navigateBack({
							delta:1
						})
					}else{
						this.$msg(res.description)
					}
				})
			},
			getLocationInfo(location) {
				let self=this;
				reverseGeocoder(location).then(res => {
						console.log('当前位置信息：', res)
						if(res.result){
							self.model.districtCode=res.result.ad_info.adcode
						}
						
					}).catch(err => {
						
					})
			},
			
			
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #FFFFFF;
	}
	
@import "@/components/iview/mixin.scss";
.address-view{
	input{
		line-height: 100upx;
		height: 100upx;
		text-align: right;
	}
}
.btn{
	button{
		background-color: #31b977;
		margin-bottom: 10px;
	}
}
.address{
	
	&-view {
	  height: 100upx;
	  line-height: 100upx;
	  padding-left: 30upx;
	  padding-right: 30upx;
	  display: flex;
	  
	  position: relative;
	  &::after {
	    @include hairline();
	    border-bottom-width: 1px;
	    border-bottom-color: #d8d8d8;
	    top: 0upx;
	    left: 30upx;
	  }
	  &-left {
	    line-height: 100upx;
	    font-size: 32upx;
	    font-weight: 400;
	    
		flex:1;
	
	    &.isrequired {
	      position: relative;
	      padding-right: 16upx;
	
	      &::before {
	        content: "*";
	        display: inline-block;
	        line-height: 100upx;
	        position: absolute;
	        right: 0px;
	        color: #d0021b;
	      }
	    }
	  }
	
	  &-right {
	    line-height: 100upx;
	    position: relative;
	    padding-right: 20upx;
	    font-size: 32upx;
		color: #BABABA;
		flex:2;
	
	    &.nodata {
	      color: rgba(153, 153, 153, 1);
	    }
	
	    &.isselect {
	      position: relative;
	
	      &::before {
	        content: " ";
	        display: inline-block;
	        width: 6px;
	        height: 6px;
	        position: absolute;
	        top: 50%;
	        right: 0upx;
	        border-width: 2px 2px 0 0;
	        border-color: #b0b0b0;
	        border-style: solid;
	        transform: translateY(-50%) matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
	      }
	    }
	  }
	}
	
}
.list-cell{
		width: 100%;
		border-top: 10px whitesmoke solid;
		.uni-list-cell{
			background-color: white;
			display: flex;
			justify-content: space-between;
			height: 50px;
			padding: 0px 15px; 
			line-height: 50px;
			border-bottom: rgb(245, 245, 245) 1px solid;
		}
		.name{
			font-family: PingFangSC-Regular;
			font-size: 14px;
			letter-spacing: 0.3px;
			color: rgba(0, 0, 0, 1);
		}
		.opt{
			font-family: PingFangSC-Regular;
			font-size: 14px;
			letter-spacing: 0.3px;
			color: rgba(0, 0, 0, 1);
			line-height: 50px;
			opacity: 0.5;
			display: flex;
		}
		}
 .btn{
 	position:fixed;
 	bottom: 40upx;
 	left:30upx;
 	width: calc(100% - 60upx) ;
 }
</style>
